<template>
    <div>
        <el-form class="login1"
                 :ref="mainForm"
                 :model="user" :rules="rules">

            <el-form-item prop="userCode" class="login2">
                <el-input v-model.trim="user.userCode">
                    <template slot="prepend">账号:</template>
                </el-input>
            </el-form-item>


            <el-form-item prop="password" class="login2">
                <el-input v-model="user.password1">
                    <template slot="prepend">首次密码:</template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password" class="login2">
                <el-input v-model="user.password2">
                    <template slot="prepend">再次密码:</template>
                </el-input>
            </el-form-item>
            <el-form-item prop="nickname" class="login2">
                <el-input v-model="user.nickname">
                    <template slot="prepend">昵称:</template>
                </el-input>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" icon="el-icon-edit"
                           @click="signUp()">注册
                </el-button>
                <el-button type="warning" icon="el-icon-remove"
                           @click="()=>$refs[mainForm].resetFields()">重置
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {mapMutations} from 'vuex';
    export default {
        data: function () {
            return {
                user: {
                    userCode: 'tester01',
                    password1: 1234,
                    password2: 1234,
                    nickname: 'max',
                },
                focusing: false,
                mainForm: 'signUpForm',
                rules: {
                    userCode: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {min: 0, max: 10, message: '10个字符以内', trigger: 'blur'}
                    ],
                    nickname: [
                        {required: true, message: '请输入昵称', trigger: 'blur'},
                        {min: 0, max: 10, message: '10个字符以内', trigger: 'blur'}
                    ],
                }
            }
        },
        directives: {
            focus: function (el, binding, vNode) {
                el.querySelector('input').focus();
                this.$message.warning(el.value + ' => ' + vNode.context.$route);
            }
        },
        computed: {},
        methods: {
            signUp: function () {
                if (this.password1 !== this.password2) {
                    this.$message.warning(JSON.stringify("两次密码不相同请更改"));
                    this.focusing = !this.focusing;
                    throw 'password not same';
                }
                // this.isExist(this.user.userCode)
                this.$http({
                    url: '/reg/' + this.user.userCode,
                    method: 'get',
                })
                    .then(({data}) => {

                        if (data == true) {
                            this.$message.warning("用户名已经存在,请更换");
                            throw 'user already exist'
                        } else {
                            this.$notify({message: 'debug: '+JSON.stringify("用户可以注册")});
                            return this.$http({
                                url: '/reg',
                                method: 'put',
                                withCredentials: false,
                                data: {
                                    username: this.user.userCode,
                                    password: this.user.password1,
                                    nickname: this.user.nickname,
                                }
                            })

                        }
                    })
                    .then(res => {
                        this.$message.warning(res.data);
                        return this.$http({
                            method: 'post',
                            url: '/login',
                            data: "username=" + this.user.userCode + "&password=" + this.user.password1,
                        })
                    })
                    .then(res => {
                        this.$message.warning(res.data.username+" 登录成功");
                        this.setUser({
                            userCode:res.data.username,
                            nickname:res.data.nickname,
                        });
                        this.$router.push("/");

                    }, error => {
                        this.$message.warning(JSON.stringify("登录失败" + error.response.data))
                    }).catch(res => console.log(JSON.stringify(res)));
            },
            ...mapMutations(['setUser']),

        }
        ,

        mounted: function () {

        }
        ,

        created: function () {

        }
        ,
        name: "SignUp"
    }
</script>

<style scoped>

</style>
